/*
  Time Machine Styles
  ------------------------------------------------------------------------------
*/

@import 'src/style/modules';

.time-machine {
  height: 100%;
  flex: 0 0 100%;
  @include no-user-select();
}

.time-machine--split {
  flex: 0 0 calc(100% - 420px);
}

.time-machine--top,
.time-machine--bottom {
  border-radius: $radius;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: $g3-castle;
}

.time-machine--top {
  position: relative;
}

.time-machine--bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.time-machine--bottom-contents {
  overflow: hidden;
  width: 100%;
  flex: 0 0 100%;
}

.time-machine--view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  > .single-stat {
    border-radius: 0 0 $radius $radius;
  }
}
